<template>
	<view class="list-item" @click="onItemClick" :style="{
		height:`${height}rpx`,
		width:`${width}rpx`,
		paddingTop:`${paddingY}rpx`,
		paddingBottom:`${paddingY}rpx`,
		paddingLeft:`${paddingX}rpx`,
		paddingRight:`${paddingX}rpx`,
		borderBottom:`1px solid ${borderColor}`,
		borderRadius:`${topRadius}rpx ${topRadius}rpx ${bottomRadius}rpx ${bottomRadius}rpx`
		}">
		<view name="left" class="lisst-itm-left">
			<slot name="left"></slot>
		</view>
		<view v-if="showRight" name="right" class="list-itm-right d-flex">
			<slot name="right"></slot>
			<text>></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: [String,Number],
				default: '88'
			},
			width: {
				type: [String,Number],
				default: '690'
			},
			paddingX: {
				type: [String,Number],
				default: '20'
			},
			paddingY: {
				type: [String,Number],
				default: '24'
			},
			topRadius: {
				type: [String,Number],
				default: '16'
			},
			bottomRadius: {
				type: [String,Number],
				default: '0'
			},
			showBorder: {
				type: Boolean,
				default: true
			},
			borderColor: {
				type: [String,Number],
				default: '#f7f7f7'
			},
			showRight: {
				type: Boolean,
				default: true
			},
			showIcon: {
				type: Boolean,
				default: true
			}
		},
		methods:{
			onItemClick(){
				this.$emit('onItemClick')
			}
		}
	}
</script>

<style scoped>
	.list-item {
	  box-sizing: border-box;
	  display: flex;
	  align-items: center;
	  background-color: #ffffff;
	
	}
	.list-itm-left{
	
	}
	
	.list-itm-right{
	  margin-left: auto;
	}
	
	.list-itm-right image {
	  height: 24rpx;
	  width: 24rpx;
	
	}
</style>
